<template>
  <SLayout>
    <!--    <SearchForm ref="searchRef" @search="flushedTable" />-->
    <SLayoutContent>
      <n-card>
        <Toolbar @getDataList="()=>tableRef?.getList()" ref="toolRef"/>
        <SDataTable
            ref="tableRef"
            type="page"
            :columns="columns"
            @getData="getData"
            option
            :update-click="updateClick"
            :delete-click="deleteClick"
            :disabled-delete="disabledDelete"
        />
      </n-card>
      <!--      <Drawer v-model:drawerShow="drawerShow" :selected="selected"/>-->
    </SLayoutContent>
  </SLayout>
</template>
<script setup>
import SLayout from "@/components/ExtLayout/SLayout.vue";
import SDataTable from "@/components/public/SDataTable.vue";
import SLayoutContent from "@/components/ExtLayout/SLayoutContent.vue";
import Toolbar from "./toolbar/Toolbar.vue";
import {delSingerById, querySingerList} from "@/api/music/singerApi";
import {NAvatar} from "naive-ui";

const tableRef =ref();
const toolRef =ref();


function updateClick(row){
  toolRef.value?.openEdit(row,row.id)
}
function deleteClick(row){
  delSingerById(row.id).then(res=>{
    tableRef.value?.getList()
  })
}
function disabledDelete(row){
  return false
}
function getData(callback,page,pageSize){

  querySingerList(page,pageSize).then(res=>{
    callback(res.data || {})
  })

}

const columns = [
  {
    title: '图片',
    key: 'picFile',
    width:100,
    render(row){
      const {picFileVo} = row;
      return picFileVo?.url? h(NAvatar,{src:picFileVo?.url}) : ''
    }
  },
  {
    title: '姓名',
    key: 'name',
    width:100,
  },
  {
    title: '英文名字',
    key: 'engName',
    width:100,
  },
  {
    title: '歌手类型',
    key: 'type',
    render(row) {
      return row.typeVo?.name || "";
    }
  },
  {
    title: '地区',
    key: 'area',
    render(row) {
      return row.areaVo?.name || "";
    }
  },
  {
    title: '简介',
    key: 'intro',
  },
]

</script>
